<template>
    <div class="box">
        <!--轮播-->
        <div class="header">
            <div class="banner-box">
                <van-swipe :autoplay="3000" @change="onChange" indicator-color="white">
                    <van-swipe-item :key="index" v-for="(item,index) in bannerItems">
                        <router-link to="">
                            <img :src="item.img">
                        </router-link>
                    </van-swipe-item>
                    <div class="custom-indicator" slot="indicator">
                        {{ current + 1 }}/{{bannerItems.length}}
                    </div>
                </van-swipe>
                <div class="count-box">限时抢购  距结束：{{countDownList}}</div>
            </div>
            <div class="main-box pa-20">
                <p class="multi-line">{{title}}</p>
                <div>
                    <p><span>¥<b>{{price}}</b></span>
                        <del v-if="oldPrice.trim() !== ''">¥{{oldPrice}}</del>
                    </p>
                    <button>分享赚{{commission}}</button>
                </div>
                <div class="share-img"  @click="doShareShow"><img src="@/assets/images/icon-share-up.png" click="sharePosterShow=true"></div>
            </div>
        </div>
        <div class="gray-box"></div>
        <!--图文详情-->
        <div class="details-box">
            <van-tabs sticky v-model="active">
                <van-tab title="图文详情">
                    <img :src="ticketsDetails">
                </van-tab>
                <van-tab title="预定须知">内容 2</van-tab>
            </van-tabs>
        </div>
        <!--下边操作栏-->
        <div class="buy-bar">
            <div class="bar-box">
                <router-link to="/">
                    <p><img src="@/assets/images/details-index.png"><span>首页</span></p>
                </router-link>
                <span @click="isCollected=!isCollected" v-if="!isCollected">
                    <p><img src="@/assets/images/details-collect.png"><span>收藏</span></p>
                </span>
                <span @click="isCollected=!isCollected" v-else>
                    <p><img src="@/assets/images/details-collected.png"><span>已收藏</span></p>
                </span>
            </div>
            <div class="btn-box">
                <button @click="addCart">加入购物车</button>
                <button>立即抢购</button>
            </div>
        </div>
        <!--分享-->
        <div class="share-box">
            <img v-if="isShareDown" @click="doShareShow" src="@/assets/images/icon-share-down.png">
        </div>
        <!--<van-popup v-model="shareShow" position="top">-->
        <!--不要了-->
        <!--<div class="popup-share">-->
        <!--<div @click="shareGraphicShow=true">分享 <br> 图文</div>-->
        <!--<div @click="sharePosterShow=true"> 分享 <br> 海报</div>-->
        <!--</div>-->
        <!--</van-popup>-->
        <!-- 分享弹窗 -->
       <Share ref="share"></Share>
        <!--信息弹窗-->
        <van-popup position="bottom" v-model="infoShow">
            <div class="info-popup pa-l-r-20">
                <van-icon @click="infoShow = false" name="close" />
                <div class="info-header">
                    <i><img :src="bannerItems[0].img"></i>
                    <div>
                        <h3 class="multi-line">{{title}}</h3>
                        <span>剩余{{lastNum}}</span>
                        <p>¥<b>{{price}}</b></p>
                    </div>
                </div>
                <div class="input-warpper">
                    <div>
                        <label>购买数量</label>
                        <van-stepper v-model="quantity" />
                    </div>
                    <div class="delivery">
                        <label>配送方式</label>
                    </div>
                    <div>
                        <van-radio-group v-model="radioDelivery">
                            <van-radio name="1">
                                <img slot="icon" slot-scope="props" :src="props.checked ? activeIcon : inactiveIcon">
                                快递邮寄
                            </van-radio>
                            <van-radio name="2">
                                <img slot="icon" slot-scope="props" :src="props.checked ? activeIcon : inactiveIcon">
                                到店自提
                            </van-radio>
                        </van-radio-group>
                    </div>
                    <div>

                    </div>
                </div>
                <div class="bottom-link">
                    <button @click="confirmOrder">确定</button>
                </div>
            </div>
        </van-popup>
        <van-popup position="bottom" v-model="dateShow">
            <van-datetime-picker :min-date="minDate" @cancel="dateShow = false" @confirm="dateConfirm" type="date" v-model="currentDate"/>
        </van-popup>
    </div>
</template>

<script>
    import bannerImg from '@/assets/temporary/product-banner.png';//banner图
    import ticketsDetails from '@/assets/temporary/ticketsDetails.jpg'
    import activeIcon from '@//assets/images/icon-active.png'
    import inactiveIcon from '@//assets/images/icon-inactive.png'
    import Share from '@/components/share/share'
    export default {
        name: "details",
         components:{Share},
        data() {
            return {
                bannerItems: [
                    {img: bannerImg,},
                    {img: bannerImg,},
                    {img: bannerImg,},
                ],
                current: 0,//轮播当前的标志
                title: `山西黄小米粥小黄米新米5斤特产2019农家五谷月 子食用吃的米杂粮`,
                price: '95',
                oldPrice: "102",
                active: 0,
                commission: '10元',//分享佣金
                ticketsDetails: ticketsDetails,//图文详情
                isCollected: false,//是否收藏
                shareShow: false,//分享提示弹窗
                infoShow: false,//信息弹窗
                lastNum: 33,//剩余数量
                userInfo:'',//用户姓名
                telInfo:'',//手机号
                currentDate: new Date(),
                useDate:'',//日期
                quantity:'',//购买数量
                dateShow:false,//日期弹窗
                minDate: new Date(),
                isShareDown:false,//是否显示下面的分享
                radioDelivery:"1",//配送方式
                inactiveIcon,
                activeIcon,
                countDownList: '00:00:00',//倒计时
                actEndTime: '2020-01-01 18:50:00',//结束时间
            }
        },
        methods: {
            //加入购物车
            addCart(){
                this.infoShow = true
            },
            // 轮播
            onChange(index) {
                this.current = index;
            },
            //选择时间
            dateConfirm(val){
                let mm = (val.getMonth()+1 < 10)? '0' + (val.getMonth()+1):val.getMonth()+1
                let dd = (val.getDate()+1 < 10)? '0' + (val.getDate()+1):val.getDate()+1
                this.useDate = val.getFullYear()+ '-' + mm + '-' + dd
                this.dateShow = false
            },
            confirmOrder(){
                //确认单
                let id = this.radioDelivery
                this.$router.push(`/product/confirmOrder/${id}`)
            },
            //上下滑动
            onScroll() {
                let scrolled = document.documentElement.scrollTop || document.body.scrollTop;
                let  header_height = document.getElementsByClassName("header")[0].offsetHeight;
                if (scrolled >= header_height) {
                    this.isShareDown = true
                }else {
                    this.isShareDown = false
                }
            },
            //倒计时
            timeFormat(param) {
                return param < 10 ? '0' + param : param;
            },
            countDown(it) {
                window.console.log(it)
                var interval = setInterval(() => {
                    // 获取当前时间，同时得到活动结束时间数组
                    let newTime = new Date().getTime();
                    // 对结束时间进行处理渲染到页面
                    let endTime = new Date(this.actEndTime).getTime();
                    let obj = null;
                    // 如果活动未结束，对时间进行处理
                    if (endTime - newTime > 0) {
                        let time = (endTime - newTime) / 1000;
                        // 获取天、时、分、秒
                        let day = parseInt(time / (60 * 60 * 24));
                        let hou = parseInt(time / (60 * 60 ));
                        let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
                        let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
                        obj = {
                            day: this.timeFormat(day),
                            hou: this.timeFormat(hou),
                            min: this.timeFormat(min),
                            sec: this.timeFormat(sec)
                        };
                    } else { // 活动已结束，全部设置为'00'
                        obj = {
                            hou: '00',
                            min: '00',
                            sec: '00'
                        };
                        clearInterval(interval);
                    }
                    this.countDownList = obj.hou + ':' + obj.min + ':' + obj.sec ;
                }, 1000);
            },
            doShareShow(){
              
                this.$refs.share.sharePosterShow = true
            }

        },
        mounted() {
            this.$nextTick(function () {
                window.addEventListener("scroll", this.onScroll);
            });
        },
        created() {
            this.countDown();
        },
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/css/public";
    @import "@/assets/css/buyBar";
    .box{
        padding-bottom: vw(120);
    }
    .banner-box {
        position: relative;

        .custom-indicator {
            position: absolute;
            bottom: vw(20);
            right: vw(30);
            font-size: vw(20);
            color: #fff;
        }
        .count-box {
            position: absolute;
            left: 0;
            bottom: 0;
            width: vw(420);
            height: vw(48);
            background: $orgGradientBg;
            color: #fff;
            font-size: vw(28);
            padding:0 vw(18);
            line-height: vw(48);
            border-radius: 0 vw(48) 0 0;
        }
    }

    .main-box {
        position: relative;
        background-color: #fff;
        .share-img {
            position: absolute;
            right: 0;
            bottom: vw(20);
            width: vw(110);
        }
        .multi-line {
            font-size: vw(32);
            line-height: vw(42);
            -webkit-line-clamp: 2;
        }

        div {
            display: flex;
            /*justify-content: space-between;*/
            align-items: center;

            p {
                font-size: vw(20);
                color: #999;
                line-height: vw(60);
                span {
                    margin-right: vw(10);
                    color: $org_font;
                    font-size: vw(28);

                    b {
                        font-size: vw(48);
                    }
                }
            }
            del{
                margin-right: vw(20);
            }
            button {
                height: vw(32);
                padding: 0 vw(12);
                font-size: vw(20);
                color: #fff;
                border-radius: vw(4);
                background-color: $green;
            }
        }
    }
</style>
